<template>
  <div class="app-container">
    <search-bar :search="searchParams" @on-search="search">
      <el-form :model="searchParams" inline class="search-form-inline" label-width="70px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品类型" >
              <el-select
                filterable
                clearable
                v-model="searchParams.productType"
                placeholder="产品类型"
              >
                 <el-option
                    v-for="item in productTypes"
                    :label="item.bizName"
                    :value="item.bizValue"
                    :key="item.value"
                  ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库">
                <Warehouse-search width='200px' v-model="searchParams.warehouseCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品名称">
              <el-input
              clearable
                v-model="searchParams.productName"
                placeholder="产品名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="产品型号" >
              <el-input
              clearable
                v-model="searchParams.productModel"
                placeholder="产品型号"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </search-bar>
    <div class="tb-main">
      <page-table
        ref="product_entry"
        :WP_MaxHeight="370"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          label="产品名称"
          prop="productName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="产品编码" prop="productCode"></el-table-column>
        <el-table-column label="产品类型" prop="productType" :formatter="formatterProductType"></el-table-column>
        <el-table-column label="产品型号" prop="productModel"></el-table-column>
        <el-table-column label="产品单位" prop="unit"></el-table-column>
        <el-table-column label="所属仓库" prop="warehouseName" show-overflow-tooltip></el-table-column>
        <el-table-column label="库存数量" prop="stockTotal">
          <template slot-scope="scope">
            <el-tag  size="medium"> {{ scope.row.stockTotal||0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="可用数量" prop="availableNum">
          <template slot-scope="scope">
            <el-tag type="success" size="medium"> {{ scope.row.availableNum||0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="锁定数量" prop="lockedNum">
          <template slot-scope="scope">
            <a v-if="scope.row.lockedNum && scope.row.lockedNum>0" @click="lockedDialog(scope.row)">
              <el-tooltip content="查看产品锁库订单" placement="top" effect="light">
              <el-tag type="danger" size="medium"> {{ scope.row.lockedNum||0 }}</el-tag>
              </el-tooltip>
            </a>
            <span v-else><el-tag type="danger" size="medium"> {{ scope.row.lockedNum||0 }}</el-tag></span>
          </template>
        </el-table-column>
      </page-table>
    </div>
    <Product-locked-panel v-if="visibleProductLocked" :visible.sync="visibleProductLocked" :warehouseCode="selectRow.warehouseCode" :warehouseName="selectRow.warehouseName"  :productCode="selectRow.productCode"  :product-name="selectRow.productName"/>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import WarehouseSearch from '@/views/eims/components/WarehouseSeach'
import Mixins from './mixins'
import ProductLockedPanel from './components/ProductLockedPanel'

export default {
  components: {SearchBar, PageTable, ProductLockedPanel, WarehouseSearch},
  mixins: [Mixins],
  data () {
    return {
      id: 'product_storage',
      labelWidth: '70px',
      thresholdInfo: {},
      selectRow: {},
      visibleProductLocked: false
    }
  },
  methods: {
    lockedDialog (row) {
      this.selectRow = row
      this.visibleProductLocked = true
    },
    saveThreshold (formName) {
      if (this.checkFormData(formName)) {
        const data = this.thresholdInfo
        data.updateTime = null
        this.requestOption('update', data, (res) => {
          this.$refs.detailDialog.close()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
